<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="../css/appointment.css">
  <title>预约看马</title>
</head>
<body>
  <div class="layui-fluid">
    <!-- 导航部分 -->
    <div class="nav">
      <img src="../img/whitelogo.jpg" alt="">
      <div class="nav-na">
        <span>首页</span>
        <span>我要买马</span>
        <span>交易流程</span>
        <span>平台服务</span>
        <span>个性需求</span>
        <span>合作伙伴</span>
        <span>关于我们</span>
      </div>
      <section class="nav-input">
        <input type="text" placeholder="搜索">
        <span>登录</span>
      </section>
    </div>
    <!-- 导航结束部分 -->
    <!-- 面包开始部分 -->
  <div class="back">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">我要买马</a>
        <a href="">安妮</a>
        <a><cite>预约看马</cite></a>
      </span>
      <section class="back-font">
        <h1>预约看马</h1>
        <p>欢迎您在线预约看马，BFE很重视您所提交的一切信息，这将令我们更了解您的需求和喜好，并为您提供更好的看马体验</p>
      </section>
  </div>
    <!-- 面包开始结束 -->
    <!-- 表单的开始页面 -->
    <div class="form">
      <h1>请填写您的个人信息</h1>
      <form class="layui-form" action="appointment.html" method="get">
        <div class="">
          <section class="form-input">
            <span>*</span>
            <label for="">姓名:&nbsp&nbsp&nbsp</label>
            <input type="text" value="">
          </section>
          <section class="form-input">
            <span>*</span>
            <label for="">手机号:</label>
            <input type="text">
          </section>
          <section class="form-inputs">
            <span>*</span>
            <label for="">验证码:</label>
            <input type="text">
            <button type="button" name="button">获取验证码</button>
          </section>
        </div>
        <div class="payment">
          <section class="payment-peal">
            <p>看马费用</p>
            <span><img src="../img/appointment/?.jpeg" alt=""></span>
          </section>
          <section class="payment-font">
            <span>￥</span>
            <span>299.00</span>
            <span>万</span>
          </section>
          <section class="payment-radio">
            <article class="payment-span">
              <span style="color:#f8a120;">*</span>
              <span>请选择支付方式:</span>
            </article>
            <section class="payment-under">
              <input type="radio" name="under" value="0" checked >
              <span>在线支付</span>
            </section>
            <section class="payment-under">
              <input type="radio" name="under" value="1">
              <span>线下支付</span>
            </section>
            <section class="payment-time">
              <span style="color:#f8a120;">*</span>
              <span style="font-size:18px">您想预约的时间：</span>
              <input type="text" id="year" placeholder="年-月-日">
            </section>
          </section>
        </div>
        <input type="submit" value="提交预约" name="button" class="submit">
      </form>
    </div>
    <!-- 表单的结束页面 -->
    <!-- 底部开始 -->
    <div class="bottom">
      <section class="bottom-peal">
        <article class="bottom-font">
          <p>公司</p>
          <p>简介</p>
          <p>联系我们</p>
          <p>团队人员</p>
          <p>企业社会责任</p>
          <p>品牌故事</p>
          <p>声明和隐私政策</p>
        </article>
        <article class="bottom-font">
          <p>咨讯</p>
          <p>新闻</p>
          <p>赛事</p>
          <p>活动</p>
          <p>精彩文章</p>
          <p>精彩专题</p>
        </article>
        <article class="bottom-font">
          <p>体验</p>
          <p>马术学院</p>
          <p>马文化博物馆</p>
        </article>
      </section>
      <div class="bottom-bt">
        <section>
          <span style="color:#fff;">分享到：</span>
          <img src="../img/appointment/watch.jpg" alt="">
          <img src="../img/appointment/weibo.jpg" alt="">
          <img src="../img/appointment/QQ.jpg" alt="">
        </section>
        <h1>全国服务热线：400-6666-888/400-6666-888</h1>
        <h3>copyright@1998-2018中邦成教育科技版权所有京ICP备05001111号</h3>
        <section class="bottom-img">
          <img src="../img/appointment/chengxin1.jpg" alt="">
          <img src="../img/appointment/chengxin2.jpg" alt="">
          <img src="../img/appointment/chengxin3.jpg" alt="">
          <img src="../img/appointment/chengxin4.jpg" alt="">
        </section>
      </div>
    </div>
    <!-- 底部结束 -->
  </div>
<script type="text/javascript">
// 加载form的调用模块
layui.use('form', function(){
  var form = layui.form;
});
// 调用date函数
layui.use('laydate', function(){
  var laydate = layui.laydate;
  laydate.render({
    elem: '#year'
  });
});
// 初始化layuiJS
    layui.use('element', function(){
    var element = layui.element;
    element.on('tab(demo)', function(data){
    });
    });

</script>
</body>
</html>
